<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>JavaScript资料 | Hexo</title>
  <script src="/js/jQuery.md5.js"></script>
  <script>
    
    (function(){
      localStorage.setItem('userinfo',hex_md5('123chen'))
      
      var localData = localStorage.getItem("userinfo");
      // var localState = localStorage.getItem("state");
        if(localStorage.getItem("state") === null){
          var reason = window.prompt('请输入访问密码');
          // var promptVal = window.prompt('请输入访问密码');
          if(reason){
              //填写内容并“确定”
              var md5Prompt = hex_md5(reason)
              //点击的是“确定” 
              if (localData !== md5Prompt){
                alert('密码错误！');
                // history.back();
                location.replace(location.href); 
              }else{
                // alert('0123');
                localStorage.setItem('state',"1")
              }
          }
          else if(reason === ""){
              //未填写但“确定”
              location.replace(location.href); 
          }
          else{
            //“取消”事件
            location.replace(location.href); 
          }
        }

    })();
  </script>
 <link rel="alternate" href="/atom.xml" data="123chen" type="application/atom+xml">
  <meta name="description" content="JavaScript 学习路线图 JavaScript高级程序设计3 JavaScript权威指南 编写可维护的JavaScript JavaScript语音精粹 JavaScript设计模式 JavaScript框架设计   学习新技术要看实战的书籍  变量12345678910111213141516171819202122232425262728293031323334&#x2F;&#x2F;    全局变量v">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript资料">
<meta property="og:url" content="http://yoursite.com/2020/03/09/01/JavaScript/index.html">
<meta property="og:site_name" content="学习的敌人是自己的满足，要认真学习一点东西，必须从不自满开始。对自己，“学而不厌”，对人家，“诲人不倦”，我们应取这种态度。">
<meta property="og:description" content="JavaScript 学习路线图 JavaScript高级程序设计3 JavaScript权威指南 编写可维护的JavaScript JavaScript语音精粹 JavaScript设计模式 JavaScript框架设计   学习新技术要看实战的书籍  变量12345678910111213141516171819202122232425262728293031323334&#x2F;&#x2F;    全局变量v">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-03-09T01:12:57.000Z">
<meta property="article:modified_time" content="2020-05-08T14:10:35.568Z">
<meta property="article:author" content="溟海">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="http://yoursite.com/2020/03/09/01/JavaScript/index.html">
  
    <link rel="alternate" href="/atom.xml" title="学习的敌人是自己的满足，要认真学习一点东西，必须从不自满开始。对自己，“学而不厌”，对人家，“诲人不倦”，我们应取这种态度。" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 4.2.0"></head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://github.com/chen08" target="_blank">
          <img class="img-circle img-rotate" src="/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">溟海</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">Web Developer &amp; Designer</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> Guangzhou, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="Search" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="Type something..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav ">
        
        
          <!-- . -->
        
        
          <li class="menu-item menu-item-home">
            <a href="/.">
              
              <i class="icon icon-home-fill"></i>
              
              <span class="menu-title">Home</span>
            </a>
          </li>
        


        
          <!-- archives -->
        
        
          <li class="menu-item menu-item-archives">
            <a href="/archives">
              
              <i class="icon icon-archives-fill"></i>
              
              <span class="menu-title">Archives</span>
            </a>
          </li>
        


        
          <!-- categories -->
        
        
          <li class="menu-item menu-item-categories">
            <a href="/categories">
              
              <i class="icon icon-folder"></i>
              
              <span class="menu-title">Categories</span>
            </a>
          </li>
        


        
          <!-- tags -->
        
        
          <li class="menu-item menu-item-tags">
            <a href="/tags">
              
              <i class="icon icon-tags"></i>
              
              <span class="menu-title">Tags</span>
            </a>
          </li>
        


        
          <!-- repository -->
        
        
          <li class="menu-item menu-item-repository">
            <a href="/repository">
              
              <i class="icon icon-project"></i>
              
              <span class="menu-title">Repository</span>
            </a>
          </li>
        


        
          <!-- books -->
        
        
          <li class="menu-item menu-item-books">
            <a href="/books">
              
              <i class="icon icon-book-fill"></i>
              
              <span class="menu-title">Books</span>
            </a>
          </li>
        


        
          <!-- links -->
        
        
          <li class="menu-item menu-item-links">
            <a href="/links">
              
              <i class="icon icon-friendship"></i>
              
              <span class="menu-title">Links</span>
            </a>
          </li>
        


        
          <!-- about -->
        
        
          <li class="menu-item menu-item-about">
            <a href="/about">
              
              <i class="icon icon-cup-fill"></i>
              
              <span class="menu-title">About</span>
            </a>
          </li>
        


        
          <!-- navigation/webstack/index.html -->
        
        
          <li class="menu-item menu-item-navigation">
            <a href="/navigation/webstack/index.html">
              
              <i class="icon icon-delicious"></i>
              
              <span class="menu-title">Navigation</span>
            </a>
          </li>
        


        
          <!-- navigation/webstack/word.html -->
        
        
          <li style="display: none;" class="menu-item menu-item-fixed">
            <a href="/navigation/webstack/word.html">
              
              <i class="icon icon-delicious"></i>
              
              <span class="menu-title">menu.fixed</span>
            </a>
          </li>
        


        
      </ul>

      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle=tooltip data-placement=top><i class="icon icon-behance"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">Board</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">Categories</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/1-WEB%E5%89%8D%E7%AB%AF/">1.WEB前端</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/2-%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/">2.编程语言</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/3-%E4%BA%A7%E5%93%81%E8%AE%BE%E8%AE%A1/">3.产品设计</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/4-%E7%AE%A1%E7%90%86%E8%90%A5%E9%94%80/">4.管理营销</a><span class="category-list-count">6</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/6-%E8%AF%BB%E4%B9%A6%E6%80%BB%E7%BB%93/">6.读书总结</a><span class="category-list-count">8</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tags</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/" rel="tag">JavaScript</a><span class="tag-list-count">15</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" rel="tag">JavaScript设计模式</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Office/" rel="tag">Office</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/PHP/" rel="tag">PHP</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%86%99%E4%BD%9C/" rel="tag">写作</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%9F%BA%E9%87%91/" rel="tag">基金</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%AD%A6%E4%B9%A0/" rel="tag">学习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%B7%A5%E4%BD%9C/" rel="tag">工作</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%80%9D%E8%80%83/" rel="tag">思考</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E6%B8%85%E5%8D%95/" rel="tag">清单</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%9B%AE%E6%A0%87/" rel="tag">目标</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E7%BB%83%E4%B9%A0/" rel="tag">练习</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%8B%B1%E8%AF%AD/" rel="tag">英语</a><span class="tag-list-count">6</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%AE%A1%E5%88%92/" rel="tag">计划</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E8%AF%AD%E6%B3%95/" rel="tag">语法</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9A%8F%E7%AC%94/" rel="tag">随笔</a><span class="tag-list-count">8</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E9%9D%A2%E8%AF%95/" rel="tag">面试</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget-body tagcloud">
      <a href="/tags/JavaScript/" style="font-size: 14px;">JavaScript</a> <a href="/tags/JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 13px;">JavaScript设计模式</a> <a href="/tags/Office/" style="font-size: 13.33px;">Office</a> <a href="/tags/PHP/" style="font-size: 13.33px;">PHP</a> <a href="/tags/%E5%86%99%E4%BD%9C/" style="font-size: 13.17px;">写作</a> <a href="/tags/%E5%9F%BA%E9%87%91/" style="font-size: 13.17px;">基金</a> <a href="/tags/%E5%AD%A6%E4%B9%A0/" style="font-size: 13px;">学习</a> <a href="/tags/%E5%B7%A5%E4%BD%9C/" style="font-size: 13px;">工作</a> <a href="/tags/%E6%80%9D%E8%80%83/" style="font-size: 13px;">思考</a> <a href="/tags/%E6%B8%85%E5%8D%95/" style="font-size: 13px;">清单</a> <a href="/tags/%E7%9B%AE%E6%A0%87/" style="font-size: 13px;">目标</a> <a href="/tags/%E7%BB%83%E4%B9%A0/" style="font-size: 13px;">练习</a> <a href="/tags/%E8%8B%B1%E8%AF%AD/" style="font-size: 13.67px;">英语</a> <a href="/tags/%E8%AE%A1%E5%88%92/" style="font-size: 13.17px;">计划</a> <a href="/tags/%E8%AF%AD%E6%B3%95/" style="font-size: 13.5px;">语法</a> <a href="/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 13.83px;">随笔</a> <a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 13px;">面试</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">Archive</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/20120/04/">April 20120</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/20120/03/">March 20120</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/05/">May 2020</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/04/">April 2020</a><span class="archive-list-count">12</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2020/03/">March 2020</a><span class="archive-list-count">14</span></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a><span class="archive-list-count">10</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/21/05/fund/%E5%9F%BA%E9%87%91%E5%9F%BA%E7%A1%80/" class="title">基金基础</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-21T01:12:57.000Z" itemprop="datePublished">20120-04-21</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/21/05/study/%E5%AD%A6%E4%B9%A0/" class="title">学习</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-21T01:12:57.000Z" itemprop="datePublished">20120-04-21</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/13/05/%E4%BB%8A%E6%97%A5%E8%AE%A1%E5%88%92/" class="title">今日计划</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-13T01:12:57.000Z" itemprop="datePublished">20120-04-13</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/03/05/office/Excel%E5%AD%A6%E4%B9%A0/" class="title">Excel学习</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-03T01:12:57.000Z" itemprop="datePublished">20120-04-03</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/categories/5-%E6%8A%80%E8%83%BD%E6%8F%90%E5%8D%87/">5.技能提升</a>
              </p>
              <p class="item-title">
                <a href="/20120/04/03/05/office/PPT%E5%AD%A6%E4%B9%A0/" class="title">PPT学习</a>
              </p>
              <p class="item-date">
                <time datetime="+020120-04-03T01:12:57.000Z" itemprop="datePublished">20120-04-03</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
  <span class="toggle-btn-absolute">
    <a class="toggle-btn" data-toggle="collapse" href="#collapseToc" aria-expanded="true" title="Catalogue" role="button">
      <i class="text-in icon icon-close"></i>
    </a>
  </span>
  <div class="slimContent">
    <nav id="toc" class="article-toc">
      <h3 class="toc-title">Catalogue</h3>
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-学习路线图"><span class="toc-number">1.</span> <span class="toc-text">JavaScript 学习路线图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#变量"><span class="toc-number">2.</span> <span class="toc-text">变量</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#03-函数的执行环境和作用域"><span class="toc-number">2.1.</span> <span class="toc-text">03 函数的执行环境和作用域</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#04-变量声明提升笔试题"><span class="toc-number">2.2.</span> <span class="toc-text">04 变量声明提升笔试题</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#表达式"><span class="toc-number">3.</span> <span class="toc-text">表达式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#数据和数据类型复习和进阶"><span class="toc-number">4.</span> <span class="toc-text">数据和数据类型复习和进阶</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#函数"><span class="toc-number">5.</span> <span class="toc-text">函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM"><span class="toc-number">6.</span> <span class="toc-text">DOM</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#内置对象"><span class="toc-number">7.</span> <span class="toc-text">内置对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#字符串容器中常用函数"><span class="toc-number">7.1.</span> <span class="toc-text">字符串容器中常用函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数组容器"><span class="toc-number">7.2.</span> <span class="toc-text">数组容器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#日期容器中的函数"><span class="toc-number">7.3.</span> <span class="toc-text">日期容器中的函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Math"><span class="toc-number">7.4.</span> <span class="toc-text">Math</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#面试题目讲解"><span class="toc-number">7.5.</span> <span class="toc-text">面试题目讲解</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript面向对象"><span class="toc-number">8.</span> <span class="toc-text">JavaScript面向对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#js-双对象法则"><span class="toc-number">8.1.</span> <span class="toc-text">js 双对象法则</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-7公有属性和私有属性"><span class="toc-number">8.2.</span> <span class="toc-text">1.7公有属性和私有属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#构造函数进阶"><span class="toc-number">8.3.</span> <span class="toc-text">构造函数进阶</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-只使用构造函数创建对象"><span class="toc-number">8.3.1.</span> <span class="toc-text">1.只使用构造函数创建对象</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-四种创建方式"><span class="toc-number">8.3.2.</span> <span class="toc-text">2.四种创建方式</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#5-面试题"><span class="toc-number">8.3.3.</span> <span class="toc-text">5. 面试题</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#万物皆属性"><span class="toc-number">8.4.</span> <span class="toc-text">万物皆属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#理解Object-defineProperty方法"><span class="toc-number">8.5.</span> <span class="toc-text">理解Object.defineProperty方法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#一、语法"><span class="toc-number">8.5.1.</span> <span class="toc-text">一、语法</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#举个例子"><span class="toc-number">8.5.1.1.</span> <span class="toc-text">[举个例子]</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#二、描述符"><span class="toc-number">8.6.</span> <span class="toc-text">二、描述符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-1-数据描述符"><span class="toc-number">8.7.</span> <span class="toc-text">2.1 数据描述符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-2-访问器描述符"><span class="toc-number">8.8.</span> <span class="toc-text">2.2 访问器描述符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-3-注意点"><span class="toc-number">8.9.</span> <span class="toc-text">2.3 注意点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#三、瞎联想"><span class="toc-number">8.10.</span> <span class="toc-text">三、瞎联想</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#四、应用"><span class="toc-number">8.11.</span> <span class="toc-text">四、应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-数组克隆方法总结"><span class="toc-number">8.12.</span> <span class="toc-text">JS 数组克隆方法总结</span></a></li></ol></li></ol>
    </nav>
  </div>
</aside>

<main class="main" role="main">
  <!-- 引入百度的思维导图库 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script>
<script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
<!-- 引入百度的思维导图库 -->
<div class="content">
  <article id="post-01/JavaScript" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript资料
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/2020/03/09/01/JavaScript/" class="article-date">
	  <time datetime="2020-03-09T01:12:57.000Z" itemprop="datePublished">2020-03-09</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/categories/1-WEB%E5%89%8D%E7%AB%AF/">1.WEB前端</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link" href="/tags/JavaScript/" rel="tag">JavaScript</a>
  </span>


        

	<span class="article-read hidden-xs">
    	<i class="icon icon-eye-fill" aria-hidden="true"></i>
    	<span id="/2020/03/09/01/JavaScript/" class="leancloud_visitors"  data-flag-title="JavaScript资料">0</span>
    </span>

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/2020/03/09/01/JavaScript/#comments" class="article-comment-link">Comments</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">Word Count: 6.8k(words)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">Read Count: 29(minutes)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h2 id="JavaScript-学习路线图"><a href="#JavaScript-学习路线图" class="headerlink" title="JavaScript 学习路线图"></a>JavaScript 学习路线图</h2><ol>
<li>JavaScript高级程序设计3</li>
<li>JavaScript权威指南</li>
<li>编写可维护的JavaScript</li>
<li>JavaScript语音精粹</li>
<li>JavaScript设计模式</li>
<li>JavaScript框架设计</li>
</ol>
<blockquote>
<p>学习新技术要看实战的书籍</p>
</blockquote>
<h2 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//    全局变量</span></span><br><span class="line"><span class="keyword">var</span> sum; <span class="comment">//变量声明</span></span><br><span class="line">sum = <span class="number">10</span>; <span class="comment">//变量赋值</span></span><br><span class="line"><span class="built_in">document</span>.title=<span class="string">'1111'</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//局部变量</span></span><br><span class="line">    <span class="keyword">var</span> sum=<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(sum) <span class="comment">/*undefined*/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//变量和函数声明提升</span></span><br><span class="line"><span class="comment">//变量声明提升</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*声明变量</span></span><br><span class="line"><span class="comment">变量赋值*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="string">"1"</span>;</span><br><span class="line">    <span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="string">"2"</span>;</span><br><span class="line">    <span class="keyword">var</span> c = <span class="string">"3"</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//上述代码等价于</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a,f,b,c;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    a = <span class="string">"1"</span>;</span><br><span class="line">    f = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">    b = <span class="string">"2"</span>;</span><br><span class="line">    c = <span class="string">"3"</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="03-函数的执行环境和作用域"><a href="#03-函数的执行环境和作用域" class="headerlink" title="03 函数的执行环境和作用域"></a>03 函数的执行环境和作用域</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//代码执行：先生成一个执行环境，再执行</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//全局作用域（全局变量）：</span></span><br><span class="line"><span class="comment">//1，最外层函数和在最外层函数外面定义的变量拥有全局作用域，如下的例子：sum=10， test， a=1</span></span><br><span class="line"><span class="comment">//函数本身也是一个特殊的变量，其名字就是函数名字</span></span><br><span class="line"><span class="comment">//2，未定义直接赋值的变量自动声明为拥有全局作用域  -- 比如 all1 all2</span></span><br><span class="line"><span class="comment">//3，所有window对象的属性拥有全局作用域，例如：window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等</span></span><br><span class="line"><span class="comment">//我们也可以通过如下方式定义一个全局变量：window.name=11</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//执行环境类似一个表格：第一行放置全局变量，第二行放置局部变量</span></span><br><span class="line"><span class="comment">//变量搜索机制：先搜索局部变量，如果没找到，搜索全部变量</span></span><br><span class="line"><span class="comment">//    第一行：sum， test， a</span></span><br><span class="line"><span class="comment">//    第二行：a， foo</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*看看函数的执行*/</span></span><br><span class="line"><span class="comment">/*a：由于变量声明提升，这里a变量是存在的，但是是undefined*/</span></span><br><span class="line"><span class="keyword">var</span> sum =<span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">10</span></span><br><span class="line">all1 = <span class="number">1000</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">//这个时候由于变量声明提升，a变量已经声明，并且值是undefined</span></span><br><span class="line">    <span class="built_in">console</span>.log(a);</span><br><span class="line">    all2 = <span class="number">200</span>;</span><br><span class="line">    <span class="comment">//foo是一个函数，解析的时候会提升，所以能够访问到</span></span><br><span class="line">    <span class="built_in">console</span>.log(foo());</span><br><span class="line">    <span class="comment">/*如果省略下面这句 输出结果是什么*/</span></span><br><span class="line">    <span class="comment">//var a =1;</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">2</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">test();</span><br></pre></td></tr></table></figure>

<h3 id="04-变量声明提升笔试题"><a href="#04-变量声明提升笔试题" class="headerlink" title="04 变量声明提升笔试题"></a>04 变量声明提升笔试题</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">    <span class="keyword">var</span> v = <span class="string">"hello"</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">test</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(v);</span><br><span class="line">        <span class="keyword">var</span> v = <span class="string">"world"</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="comment">//    这段代码运行的结果是什么呢？</span></span><br><span class="line">    <span class="comment">//    答案是：undefined</span></span><br><span class="line">    <span class="comment">//    这段代码说明了两个问题，</span></span><br><span class="line">    <span class="comment">//    第一，function作用域里的变量v遮盖了上层作用域变量v。</span></span><br><span class="line">    <span class="comment">//    第二，在function作用域内，变量v的声明被提升了。所以最初的代码相当于：</span></span><br><span class="line">    <span class="comment">//</span></span><br><span class="line">    <span class="comment">//    var v = "hello";</span></span><br><span class="line">    <span class="comment">//    function test ()&#123;</span></span><br><span class="line">    <span class="comment">//        var v; //声明一个变量 声明提升，但是不会被赋值</span></span><br><span class="line">    <span class="comment">//        console.log(v);</span></span><br><span class="line">    <span class="comment">//        v = "world";</span></span><br><span class="line">    <span class="comment">//    &#125;</span></span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">## 运算符</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>JavaScript</span><br><span class="line">  <span class="comment">//    算术运算符 +（加）  ——（减）  *（乘） /（除） %(取余数)</span></span><br><span class="line">  <span class="comment">//    复合赋值运算符 -= += *= /= %=</span></span><br><span class="line">  <span class="comment">//    自增自减运算符 -- ++</span></span><br><span class="line">  <span class="comment">//    比较运算符 &gt; &lt; &gt;= &lt;= ==(比较的时候做类型转换) ===（全等于：值 数据类型都一样才算相等） !=</span></span><br><span class="line">  <span class="comment">//    逻辑运算符 &amp;&amp; 与 |或 ！非</span></span><br><span class="line">  <span class="comment">//    三元运算符</span></span><br><span class="line">  <span class="comment">//    短路运算符</span></span><br><span class="line">  <span class="keyword">var</span> sum=<span class="number">0</span>;</span><br><span class="line">  <span class="keyword">if</span>(sum == <span class="number">0</span>)&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//自动类型转换</span></span><br><span class="line"><span class="keyword">if</span>(<span class="number">1</span>==<span class="string">'1'</span>)&#123;</span><br><span class="line">    alert(<span class="string">'==一样'</span>)  <span class="comment">//一样</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//比较的时候不会类型转换</span></span><br><span class="line">  <span class="comment">//    if(1==='1')&#123;</span></span><br><span class="line">  <span class="comment">//        alert('===一样')  //不相等，不会执行</span></span><br><span class="line">  <span class="comment">//    &#125;</span></span><br></pre></td></tr></table></figure>


<h2 id="表达式"><a href="#表达式" class="headerlink" title="表达式"></a>表达式</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x= <span class="number">0</span>,y= <span class="number">0</span>,z=<span class="number">0</span>;</span><br><span class="line"><span class="keyword">var</span> result = (x=<span class="number">8</span>*<span class="number">2</span>,x*<span class="number">4</span>) <span class="comment">/*整个表达式的值为64，x的值为16*/</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"><span class="built_in">console</span>.log(x)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">x=(z=<span class="number">5</span>,<span class="number">5</span>*<span class="number">2</span>) <span class="comment">/*整个表达式为赋值表达式，它的值为10，z的值为5*/</span></span><br><span class="line"><span class="built_in">console</span>.log(x)</span><br><span class="line"><span class="built_in">console</span>.log(z)</span><br><span class="line"></span><br><span class="line">x=z=<span class="number">5</span>,<span class="number">5</span>*<span class="number">2</span> <span class="comment">/*整个表达式为逗号表达式，它的值为10，x和z的值都为5*/</span></span><br><span class="line"><span class="built_in">console</span>.log(x)</span><br><span class="line"><span class="built_in">console</span>.log(z)</span><br></pre></td></tr></table></figure>

<h2 id="数据和数据类型复习和进阶"><a href="#数据和数据类型复习和进阶" class="headerlink" title="数据和数据类型复习和进阶"></a>数据和数据类型复习和进阶</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.write(<span class="string">"&lt;h1 style='color:red'&gt;传智播客&lt;/h1&gt;"</span>);</span><br><span class="line"><span class="comment">//数值型</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">1</span>;</span><br><span class="line"><span class="comment">//字符串型</span></span><br><span class="line"><span class="keyword">var</span> num2 =<span class="string">'2333fgfgfggggggggggggggggggggg'</span>;</span><br><span class="line"><span class="comment">//布尔型</span></span><br><span class="line"><span class="keyword">var</span> num3 =<span class="literal">false</span>;</span><br><span class="line"><span class="comment">//对象型</span></span><br><span class="line"><span class="keyword">var</span> num4 = <span class="built_in">document</span>.getElementById(<span class="string">'mydiv'</span>);</span><br><span class="line"><span class="comment">//未定义</span></span><br><span class="line"><span class="keyword">var</span> num5;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="keyword">typeof</span>(num1);</span><br><span class="line"><span class="comment">// var b ='b';</span></span><br><span class="line"><span class="comment">// alert(a+b);</span></span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'&lt;h1&gt;num1的数据类型是'</span>+a+<span class="string">'&lt;/h1&gt;'</span>);</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">'&lt;h1&gt;num2的数据类型是'</span>+<span class="keyword">typeof</span>(num2)+<span class="string">'&lt;/h1&gt;'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//数据类型检测的重要性</span></span><br><span class="line"><span class="comment">//    数据类型检测的重要性 -- 重要</span></span><br><span class="line"><span class="comment">//创业型公司   两个员工 : 小王:4000元  小李 : 5000元 一个月</span></span><br><span class="line"><span class="comment">//字符串</span></span><br><span class="line"><span class="keyword">var</span> xiaowang=<span class="string">'7000'</span>;</span><br><span class="line"><span class="comment">//字符串</span></span><br><span class="line"><span class="keyword">var</span> xiaoli=<span class="string">'10000'</span>;</span><br><span class="line"></span><br><span class="line"><span class="number">100007000</span></span><br><span class="line"><span class="comment">//9000</span></span><br><span class="line"><span class="comment">//数据类型转换</span></span><br><span class="line">alert(<span class="built_in">parseInt</span>(xiaowang)+<span class="built_in">parseInt</span>(xiaoli));</span><br><span class="line"><span class="comment">//数据类型转换..</span></span><br><span class="line"><span class="comment">//parseInt</span></span><br><span class="line"><span class="comment">//检测数据类型</span></span><br><span class="line">alert(<span class="keyword">typeof</span>(xiaowang))</span><br></pre></td></tr></table></figure>


<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><h2 id="DOM"><a href="#DOM" class="headerlink" title="DOM"></a>DOM</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">    <span class="built_in">document</span>.title = <span class="string">'传智播客'</span>             <span class="comment">//设置文档标题等价于HTML的&lt;title&gt;标签</span></span><br><span class="line">    <span class="built_in">document</span>.bgColor = <span class="string">'red'</span>          <span class="comment">//设置页面背景色</span></span><br><span class="line">    <span class="built_in">document</span>.fgColor  = <span class="string">'green'</span>          <span class="comment">//设置前景色(文本颜色)</span></span><br><span class="line">    <span class="built_in">document</span>.linkColor = <span class="string">'blue'</span>         <span class="comment">//未点击过的链接颜色</span></span><br><span class="line">    <span class="built_in">document</span>.alinkColor = <span class="string">'red'</span>        <span class="comment">//激活链接(焦点在此链接上)的颜色</span></span><br><span class="line">    <span class="built_in">document</span>.vlinkColor = <span class="string">'orange'</span>        <span class="comment">//已点击过的链接颜色</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//    总结：我们只需要工具是如何使用的就可以了，至于为什么能实现这样的效果，我们不用知道</span></span><br></pre></td></tr></table></figure>



<h2 id="内置对象"><a href="#内置对象" class="headerlink" title="内置对象"></a>内置对象</h2><h3 id="字符串容器中常用函数"><a href="#字符串容器中常用函数" class="headerlink" title="字符串容器中常用函数"></a>字符串容器中常用函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br></pre></td><td class="code"><pre><span class="line">  <span class="comment">//字符串的属性 - length</span></span><br><span class="line">  <span class="keyword">var</span> myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  myString.length;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment"> *************************字符串对象属性和方法概述*******************************</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">          获取字符串长度Length属性</span></span><br><span class="line"><span class="comment">          连接字符串：concat</span></span><br><span class="line"><span class="comment">          获取索引值：indexOf()</span></span><br><span class="line"><span class="comment">          根据索引值获取单个字符：charAt()</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">******************************************************************************</span></span><br><span class="line"><span class="comment">*******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                              concat方法</span></span><br><span class="line"><span class="comment">                              连接字符串</span></span><br><span class="line"><span class="comment">*******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'concat用法'</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> s1=<span class="string">"a"</span>;</span><br><span class="line">  <span class="keyword">var</span> s2=<span class="string">"b"</span>;</span><br><span class="line">  <span class="keyword">var</span> s3=<span class="string">"c"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(s1.concat(s2,s3));<span class="comment">//abc</span></span><br><span class="line"><span class="comment">//    等同于：result = s1 + s2 + ... + s</span></span><br><span class="line"><span class="comment">//    关联记忆：数组中的concat</span></span><br><span class="line">  <span class="keyword">var</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</span><br><span class="line">  <span class="built_in">console</span>.log(arr.concat(<span class="number">4</span>, <span class="number">5</span>));<span class="comment">//[1,2,3,4,5]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                  indexOf</span></span><br><span class="line"><span class="comment">                      找到匹配项返回索引值，如果没找到返回-1</span></span><br><span class="line"><span class="comment">*******************************************************************************/</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'indexOf用法'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//    获取索引值indexOf</span></span><br><span class="line"><span class="comment">//    常用方法：找到匹配项返回索引值，如果没找到返回-1</span></span><br><span class="line">  <span class="keyword">var</span> myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="keyword">var</span> a1=myString.indexOf(<span class="string">"v"</span>);<span class="comment">//2</span></span><br><span class="line">  <span class="keyword">var</span> a2=myString.indexOf(<span class="string">"S"</span>);<span class="comment">//4</span></span><br><span class="line">  <span class="keyword">var</span> a3=myString.indexOf(<span class="string">"Script"</span>);<span class="comment">//4</span></span><br><span class="line">  <span class="keyword">var</span> a4=myString.indexOf(<span class="string">"key"</span>);<span class="comment">// 如果没有匹配项返回 -1</span></span><br><span class="line">  <span class="built_in">console</span>.log(a1)<span class="comment">//2</span></span><br><span class="line">  <span class="built_in">console</span>.log(a2)<span class="comment">//4</span></span><br><span class="line">  <span class="built_in">console</span>.log(a3)<span class="comment">//4</span></span><br><span class="line">  <span class="built_in">console</span>.log(a4)<span class="comment">//-1</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//    完整的indexof用法：</span></span><br><span class="line"><span class="comment">//    可以传入第二个参数：indexOf（str，fromIndex）</span></span><br><span class="line"><span class="comment">//    表示从索引位置fromIndex开始查找，如果fromIndex省略，则表示默认从起始索引0开始查找；</span></span><br><span class="line"><span class="comment">//    若fromIndex为负，则从索引0开始查找。</span></span><br><span class="line">  <span class="keyword">var</span> b1 = myString.indexOf(<span class="string">"v"</span>,<span class="number">5</span>);<span class="comment">// 从下标5开始查找，而v在索引2，所以找不到，返回-1</span></span><br><span class="line">  <span class="keyword">var</span> b2 = myString.indexOf(<span class="string">"v"</span>,<span class="number">1</span>);<span class="comment">//-2</span></span><br><span class="line">  <span class="built_in">console</span>.log(b1)<span class="comment">//-1</span></span><br><span class="line">  <span class="built_in">console</span>.log(b2)<span class="comment">//-2</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                  charAt</span></span><br><span class="line"><span class="comment">                  返回指定索引位置的字符，若索引越界，返回空字符串。</span></span><br><span class="line"><span class="comment">*******************************************************************************/</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'charAt用法'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//返回指定索引位置的字符</span></span><br><span class="line"><span class="comment">//(因为Javascript中没有字符类型，所以返回的是长度为1的字符串)。</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.charAt(<span class="number">1</span>));<span class="comment">//a</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.charAt(<span class="number">10000000000000000</span>));<span class="comment">//若索引越界，返回空字符串</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.charAt(<span class="number">-1</span>));<span class="comment">//若索引越界，返回空字符串  -- ""</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.charAt(<span class="number">-10000000000000000000000</span>));<span class="comment">//若索引越界，返回空字符串</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                      substr(fromIndex,length)</span></span><br><span class="line"><span class="comment">                              获取部分字符串</span></span><br><span class="line"><span class="comment">              从起始索引fromIndex开始截取长度length的字符串</span></span><br><span class="line"><span class="comment">*******************************************************************************/</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'substr用法'</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">//从起始索引fromIndex开始截取长度length的字符串 - 正向截取</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">1</span>,<span class="number">1</span>));<span class="comment">//a          表示从第1个索引值开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">1</span>,<span class="number">2</span>));<span class="comment">//av女忧     表示从第1个索引值开始截取，截取2个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">1</span>,<span class="number">3</span>));<span class="comment">//ava        表示从第1个索引值开始截取，截取3个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">1</span>,<span class="number">4</span>));<span class="comment">//avaS       表示从第1个索引值开始截取，截取4个字符</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//若不指定length或者length超过可截取的最大长度，则截取到结尾。</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">1</span>));<span class="comment">//avaScript</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">1</span>,<span class="number">4000000</span>));<span class="comment">//avaScript</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">//反向截取</span></span><br><span class="line">  <span class="comment">//若起始索引为负，则从右往左开始截取 - -1表示倒数第一个， -2表示倒数第二个</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-1</span>,<span class="number">1</span>));<span class="comment">//t  表示从倒数第一个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-2</span>,<span class="number">1</span>));<span class="comment">//p  表示从倒数第二个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-3</span>,<span class="number">1</span>));<span class="comment">//i  表示从倒数第三个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-4</span>,<span class="number">1</span>));<span class="comment">//r  表示从倒数第四个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-5</span>,<span class="number">1</span>));<span class="comment">//c  表示从倒数第五个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">1</span>));<span class="comment">//S  表示从倒数第六个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-7</span>,<span class="number">1</span>));<span class="comment">//a  表示从倒数第七个开始截取，截取1个字符</span></span><br><span class="line"></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">1</span>));<span class="comment">//S  表示从倒数第6个开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">2</span>));<span class="comment">//Sc  表示从倒数第6个开始截取，截取2个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">3</span>));<span class="comment">//Scr  表示从倒数第6个开始截取，截取3个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">4</span>));<span class="comment">//Scri  表示从倒数第6个开始截取，截取4个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">5</span>));<span class="comment">//Scrip  表示从倒数第6个开始截取，截取5个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">6</span>));<span class="comment">//Script  表示从倒数第6个开始截取，截取6个字符</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//男生的作业：</span></span><br><span class="line">  <span class="comment">//从倒数的方式开始截取，获取av</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-9</span>,<span class="number">2</span>));<span class="comment">//Script  表示从倒数第6个开始截取，截取6个字符</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">//女生的作业：</span></span><br><span class="line">  <span class="comment">//整数的方式获取曲线S</span></span><br><span class="line">  <span class="comment">//首先思考 我要获取几个字符，则后面的参数就确定了</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">4</span>,<span class="number">1</span>));<span class="comment">//S  表示从索引值4开始截取，截取1个字符</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substr(<span class="number">-6</span>,<span class="number">1</span>));<span class="comment">//S  表示从倒数第6个开始截取，截取1个字符</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                              substring(startIndex,endIndex)</span></span><br><span class="line"><span class="comment">                                      获取部分字符串</span></span><br><span class="line"><span class="comment">                  截取 起始索引startIndex  到  结束索引endIndex的子字符串，</span></span><br><span class="line"><span class="comment">                  结果包含startIndex处的字符，不包含endIndex处的字符。</span></span><br><span class="line"><span class="comment">    *******************************************************************************/</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'substring用法'</span>)</span><br><span class="line">  <span class="comment">//男生的作业：获取av</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substring(<span class="number">1</span>,<span class="number">3</span>));</span><br><span class="line"></span><br><span class="line">  <span class="comment">//女生的作业：获取曲线S</span></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.substring(<span class="number">4</span>,<span class="number">5</span>));</span><br><span class="line"></span><br><span class="line">  <span class="comment">//其他小点：</span></span><br><span class="line">  <span class="comment">//如果省略个数,则自动获取后面所有</span></span><br><span class="line">    <span class="built_in">console</span>.log(myString.substring(<span class="number">4</span>));<span class="comment">//Script</span></span><br><span class="line">  <span class="comment">//若startIndex或者endIndex为负，则会被替换为0。</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substring(<span class="number">-1</span>,<span class="number">1</span>));<span class="comment">//J</span></span><br><span class="line">  <span class="comment">//若startIndex = endIndex，则返回空字符串。</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substring(<span class="number">3</span>,<span class="number">3</span>));<span class="comment">//返回空</span></span><br><span class="line">  <span class="comment">//若startIndex &gt; endIndex，则执行方法时，两个值会被交换。</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.substring(<span class="number">3</span>,<span class="number">1</span>));<span class="comment">//等价于myString.substring(1,3)</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                          slice(startIndex,endIndex)</span></span><br><span class="line"><span class="comment">                              获取部分字符串</span></span><br><span class="line"><span class="comment">              截取 起始索引startIndex  到  结束索引endIndex的子字符串，</span></span><br><span class="line"><span class="comment">                  结果包含startIndex处的字符，不包含endIndex处的字符。</span></span><br><span class="line"><span class="comment">    *******************************************************************************/</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'slice(startIndex,endIndex)用法'</span>)</span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.slice(<span class="number">1</span>,<span class="number">3</span>)) <span class="comment">//av</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.slice(<span class="number">4</span>,<span class="number">5</span>)) <span class="comment">//S</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.slice(<span class="number">4</span>)) <span class="comment">//Script  //如果省略个数,则自动获取后面所有</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 基本用法和substring用法一样，不同点如下：</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//    stringObj.slice(start, [end])</span></span><br><span class="line"><span class="comment">//    如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度。</span></span><br><span class="line">      <span class="built_in">console</span>.log(myString.slice(<span class="number">-1</span>,<span class="number">3</span>))</span><br><span class="line"><span class="comment">//    如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度。</span></span><br><span class="line">      <span class="built_in">console</span>.log(myString.slice(<span class="number">2</span>,<span class="number">-3</span>))</span><br><span class="line"><span class="comment">//    如果省略 end ，那么 slice 方法将一直复制到 arrayObj 的结尾。</span></span><br><span class="line"><span class="comment">//    如果 end 大于 start，不复制任何元素到新数组中。</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//    strVariable.substring(start, end)</span></span><br><span class="line"><span class="comment">//    如果 start 或 end 为 NaN 或者负数，那么将其替换为0。</span></span><br><span class="line"><span class="comment">//    子字符串的长度等于 start 和 end 之差的绝对值。例如，在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。</span></span><br><span class="line"><span class="comment">//    slice可以对数组操作，substring不行。。。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                              split()分割</span></span><br><span class="line"><span class="comment">                  按给定字符串分割，返回分割后的多个字符串组成的字符串数组。</span></span><br><span class="line"><span class="comment">    *******************************************************************************/</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'split()用法'</span>)</span><br><span class="line">  <span class="keyword">var</span> s=<span class="string">"a,bc,d"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(s.split(<span class="string">","</span>));<span class="comment">//["a", "bc", "d"]</span></span><br><span class="line">  s=<span class="string">"a1b1c1d1"</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(s.split(<span class="string">"1"</span>));<span class="comment">//["a", "b", "c", "d", ""]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                              John()合并</span></span><br><span class="line"><span class="comment">                      使用您选择的分隔符将一个数组合并为一个字符串</span></span><br><span class="line"><span class="comment">    *******************************************************************************/</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'John用法'</span>)</span><br><span class="line">  <span class="keyword">var</span> myList=<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">"jpg"</span>,<span class="string">"bmp"</span>,<span class="string">"gif"</span>,<span class="string">"ico"</span>,<span class="string">"png"</span>);</span><br><span class="line">  <span class="keyword">var</span> imgString=myList.join(<span class="string">"|"</span>);<span class="comment">//结果是jpg|bmp|gif|ico|png</span></span><br><span class="line">  <span class="built_in">console</span>.log(imgString)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">//split()还可以结合正则表达式</span></span><br><span class="line">  myString = <span class="string">'javascript is a good script language'</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(myString.split(<span class="regexp">/\s/</span>)); <span class="comment">//javascript,is,a,good,script,language</span></span><br><span class="line">  <span class="comment">//传入\s表示要匹配空格，我们将字符串分割为一个数组，如果你要访问某一个，那么可以明确指出：</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString.split(<span class="regexp">/\s/</span>)[<span class="number">3</span>]); <span class="comment">//good</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                              字符串大小写转换</span></span><br><span class="line"><span class="comment">                  使用您选择的分隔符将一个数组合并为一个字符串</span></span><br><span class="line"><span class="comment">    *******************************************************************************/</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'字符串大小写转换'</span>)</span><br><span class="line"></span><br><span class="line">  myString=<span class="string">"JavaScript"</span>;</span><br><span class="line">  myString = myString.toLowerCase();<span class="comment">//javascript</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString)</span><br><span class="line">  myString = myString.toUpperCase();<span class="comment">//JAVASCRIPT</span></span><br><span class="line">  <span class="built_in">console</span>.log(myString)</span><br></pre></td></tr></table></figure>

<h3 id="数组容器"><a href="#数组容器" class="headerlink" title="数组容器"></a>数组容器</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//数组容器中包含的属性</span></span><br><span class="line"><span class="comment">//var arr1 = [1,2,3,4,5];</span></span><br><span class="line"><span class="comment">//arr1.length;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                组合记忆 shift unshift pop push</span></span><br><span class="line"><span class="comment">                        添加和删除</span></span><br><span class="line"><span class="comment">            shift unshift  从数组开头开始添加或者删除</span></span><br><span class="line"><span class="comment">                pop push   从数组末尾添加或者删除</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//shift：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined</span></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> result = arr1.shift(); <span class="comment">//arr1 [2,3,4,5] result：1</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"><span class="comment">//unshift：将参数添加到原数组开头，并返回数组的长度</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.unshift(<span class="number">-2</span>,<span class="number">-1</span>); <span class="comment">//arr1：[-2,-1,1,2,3,4,5] result：7</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//pop：删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined</span></span><br><span class="line">arr1= [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.pop(); <span class="comment">//a：[1,2,3,4] b：5</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"><span class="comment">//push：将参数添加到原数组末尾，并返回数组的长度</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.push(<span class="number">6</span>,<span class="number">7</span>); <span class="comment">//a：[1,2,3,4,5,6,7] b：7</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                    数组合并concat</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//concat：返回一个新数组，是将参数添加到原数组中构成的</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.concat(<span class="number">6</span>,<span class="number">7</span>); <span class="comment">//a：[1,2,3,4,5] b：[1,2,3,4,5,6,7]</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                               排序 sort 从小到大 reverse 从大到小</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"> <span class="comment">// sort(orderfunction)：按指定的参数对数组进行排序</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.sort(); <span class="comment">//[1,2,3,4,5]</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"><span class="comment">//    reverse：将数组反序</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">8</span>,<span class="number">34</span>];</span><br><span class="line">result = arr1.reverse(); <span class="comment">//[34,8,5,4,3,2,1]</span></span><br><span class="line"><span class="built_in">console</span>.log(result)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                slice(start,end) 数组截取</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组，但不包括结束位置的项</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.slice(<span class="number">2</span>,<span class="number">5</span>); <span class="comment">//[3,4,5]</span></span><br><span class="line">result = arr1.slice(<span class="number">2</span>);   <span class="comment">//[3,4,5]     在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项；</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//作业</span></span><br><span class="line">result = arr1.slice(<span class="number">0</span>);   <span class="comment">//返回自身</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                        join(separator) 数组拼接成字符串</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"><span class="comment">//将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.join(<span class="string">"|"</span>); <span class="comment">//a：[1,2,3,4,5] b："1|2|3|4|5"</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                    splice</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"><span class="comment">//splice(start,deleteCount,val1,val2,...)：</span></span><br><span class="line"><span class="comment">// 从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...</span></span><br><span class="line">arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">result = arr1.splice(<span class="number">2</span>,<span class="number">2</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>); <span class="comment">//a：[1,2,7,8,9,5] b：[3,4]</span></span><br><span class="line">result = arr1.splice(<span class="number">0</span>,<span class="number">1</span>); <span class="comment">//同shift</span></span><br><span class="line"></span><br><span class="line">arr1.splice(<span class="number">0</span>,<span class="number">0</span>,<span class="number">-2</span>,<span class="number">-1</span>);</span><br><span class="line">result = arr1.length; <span class="comment">//同unshift</span></span><br><span class="line"></span><br><span class="line">result = arr1.splice(arr1.length<span class="number">-1</span>,<span class="number">1</span>); <span class="comment">//同pop</span></span><br><span class="line">arr1.splice(arr1.length,<span class="number">0</span>,<span class="number">6</span>,<span class="number">7</span>);</span><br><span class="line">result = arr1.length; <span class="comment">//同push</span></span><br></pre></td></tr></table></figure>

<h3 id="日期容器中的函数"><a href="#日期容器中的函数" class="headerlink" title="日期容器中的函数"></a>日期容器中的函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                获取</span></span><br><span class="line"><span class="comment">                        具体的某个日期或者时间</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//当使用构造函数实例化一个日期对象之后，接下来我们可以从其中获取具体的日期，时间等各种数字</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取日期 -  年（1970-????） 月(0-11） 日（0-31） 星期（0-6）</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'获取日期'</span>)</span><br><span class="line">date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date.getFullYear())  <span class="comment">//获取完整的年份(4位,1970-????)</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getYear())      <span class="comment">//获取当前年份(2位，不准确，已淘汰) 从 ECMAScript v3 开始，JavaScript 的实现就不再使用该方法，而使用 getFullYear() 方法取而代之</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getMonth())     <span class="comment">//获取当前月份(0-11,0代表1月)</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getDate());　　 <span class="comment">//获取几号   - 0 - 31 比如25</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getDay());　　  <span class="comment">//获取星期几 - 比如星期3的3</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取时间 - 小时（0-23）  分（0-59）  秒（0-659） 毫秒值(0-999)  比如：12:23:45 375</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'获取时间'</span>)</span><br><span class="line">date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="built_in">console</span>.log(date.getHours())            <span class="comment">//获取小时                      12</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getMinutes());         <span class="comment">//获取分                        23</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getSeconds());         <span class="comment">//获取秒                        45</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getMilliseconds());　　<span class="comment">// 获取毫秒     　　             375</span></span><br><span class="line"><span class="built_in">console</span>.log(date.getTime());　　        <span class="comment">// 获取相对于1970-01-01的毫秒值   1443085759313</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/******************************************************************************</span></span><br><span class="line"><span class="comment">                                    设置</span></span><br><span class="line"><span class="comment">                            具体的某个日期或者时间</span></span><br><span class="line"><span class="comment"> *******************************************************************************/</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//使用方法：创建一个日期对象，然后自定义具体的日期，时间</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//setFullYear(year, opt_month, opt_date) ：设置Date对象的年份值；4位年份。</span></span><br><span class="line"><span class="comment">//setMonth(month, opt_date) ：设置Date对象的月份值。0表示1月，11表示12月。</span></span><br><span class="line"><span class="comment">//setDate(date) ：设置Date对象的月份中的日期值；值的范围1~31 。</span></span><br><span class="line"><span class="comment">//setHours(hour, opt_min, opt_sec, opt_msec) ：设置Date对象的小时值。</span></span><br><span class="line"><span class="comment">//setMinutes(min, opt_sec, opt_msec) ：设置Date对象的分钟值。</span></span><br><span class="line"><span class="comment">//setSeconds(sec, opt_msec) ：设置Date对象的秒数值。</span></span><br><span class="line"><span class="comment">//setMilliseconds(msec) ：设置Date对象的毫秒值。</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//比如根据太阳的衰变动态计算太阳消失的时间</span></span><br><span class="line"></span><br><span class="line">date = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">date.setFullYear(<span class="number">9999</span>); <span class="comment">// =&gt; 9999年</span></span><br><span class="line">date.setMonth(<span class="number">11</span>); <span class="comment">// =&gt; 11：月；实际为12月份(月份从0开始计算)</span></span><br><span class="line">date.setDate(<span class="number">25</span>); <span class="comment">// =&gt; 25：日</span></span><br><span class="line">date.setHours(<span class="number">15</span>); <span class="comment">// =&gt; 15：时</span></span><br><span class="line">date.setMinutes(<span class="number">30</span>); <span class="comment">// =&gt; 30：分</span></span><br><span class="line">date.setSeconds(<span class="number">40</span>); <span class="comment">// =&gt; 40：秒</span></span><br><span class="line">date.setMilliseconds(<span class="number">333</span>); <span class="comment">// =&gt; 333：毫秒</span></span><br><span class="line"><span class="built_in">console</span>.log(date); <span class="comment">// =&gt;  9999年12月25日 15点30分40秒 333毫秒</span></span><br></pre></td></tr></table></figure>

<h3 id="Math"><a href="#Math" class="headerlink" title="Math"></a>Math</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//    圆周率 --我们无须再记忆PI是多少，直接通过属性就可以获取了。。。。这就是对象的好处。。</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">Math</span>.PI)</span><br><span class="line"><span class="comment">//计算圆的周长</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>*<span class="built_in">Math</span>.PI*<span class="number">10</span>)</span><br><span class="line"></span><br><span class="line">    <span class="comment">/*教学目标：*/</span></span><br></pre></td></tr></table></figure>

<h3 id="面试题目讲解"><a href="#面试题目讲解" class="headerlink" title="面试题目讲解"></a>面试题目讲解</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">addSpace</span>(<span class="params">str</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> str.split(<span class="string">''</span>).join(<span class="string">' '</span>);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">'hello world'</span></span><br><span class="line">  <span class="built_in">console</span>.log(addSpace(str))</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//    math容器中的功能 -- 四舍五入</span></span><br><span class="line">  <span class="keyword">var</span> a=<span class="number">12.52</span>;</span><br><span class="line">  b=<span class="number">10.35</span>;</span><br><span class="line">  c=<span class="built_in">Math</span>.round(a);</span><br><span class="line">  d=<span class="built_in">Math</span>.round(b);</span><br><span class="line">  <span class="built_in">document</span>.write(c+<span class="string">' '</span>+d)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">//    先思考思路：</span></span><br><span class="line"><span class="comment">//    先split，然后从第二个开始遍历，针对每次遍历作如下事情：获取第一个字符变为大写，其余变为小写</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">combo</span>(<span class="params">msg</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">var</span> arr=msg.split(<span class="string">"-"</span>);</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;arr.length;i++)&#123;</span><br><span class="line">          arr[i]=arr[i].charAt(<span class="number">0</span>).toUpperCase()+arr[i].substr(<span class="number">1</span>,arr[i].length<span class="number">-1</span>);</span><br><span class="line">      &#125;</span><br><span class="line">      msg=arr.join(<span class="string">""</span>);</span><br><span class="line">      <span class="keyword">return</span> msg;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">//    使用substring改造</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">combo2</span>(<span class="params">msg</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">var</span> arr=msg.split(<span class="string">"-"</span>);</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">1</span>;i&lt;arr.length;i++)&#123;</span><br><span class="line">          arr[i]=arr[i].charAt(<span class="number">0</span>).toUpperCase()+arr[i].substring(<span class="number">1</span>,arr[i].length);</span><br><span class="line">      &#125;</span><br><span class="line">      msg=arr.join(<span class="string">""</span>);</span><br><span class="line">      <span class="keyword">return</span> msg;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  str=<span class="string">'get-element-by-id'</span></span><br><span class="line">  <span class="built_in">console</span>.log(combo2(str))</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">//大牛做法；</span></span><br><span class="line">  <span class="comment">//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符串</span></span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">strReverse</span>(<span class="params">str</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> str.split(<span class="string">''</span>).reverse().join(<span class="string">''</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> str = <span class="string">'12345678'</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(strReverse(str))</span><br></pre></td></tr></table></figure>


<h2 id="JavaScript面向对象"><a href="#JavaScript面向对象" class="headerlink" title="JavaScript面向对象"></a>JavaScript面向对象</h2><h3 id="js-双对象法则"><a href="#js-双对象法则" class="headerlink" title="js 双对象法则"></a>js 双对象法则</h3><blockquote>
<p>Js里面定义对象和其他语言不太一样，他通过两个对象来完成定义对象的功能。 属性(property) 和方法(method)</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Product</span> （）</span>&#123;</span><br><span class="line">  <span class="comment">// 构造函数属性</span></span><br><span class="line">  This.name= <span class="string">''</span></span><br><span class="line">  <span class="comment">// 构造函数方法</span></span><br><span class="line">  This.buy=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">Product.prototype=&#123;</span><br><span class="line">  <span class="comment">// 原型对象属性</span></span><br><span class="line">  Price:<span class="number">100</span>,</span><br><span class="line">  <span class="comment">// 原型对象方法</span></span><br><span class="line">  Buy:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//也可以这样定义</span></span><br><span class="line"><span class="comment">//    Product.prototype.Buy = function() &#123;</span></span><br><span class="line"><span class="comment">//        return this.price</span></span><br><span class="line"><span class="comment">//    &#125;;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 其实所谓的对象包含两个独立的对象：构造函数对象，一个叫原型对象</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 构造函数属性</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 构造函数方法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 原型对象方法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 原型对象属性</span></span><br></pre></td></tr></table></figure>


<h3 id="1-7公有属性和私有属性"><a href="#1-7公有属性和私有属性" class="headerlink" title="1.7公有属性和私有属性"></a>1.7公有属性和私有属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//对象构造函数</span></span><br><span class="line"><span class="comment">//私有属性好处： 安全 就类似闭包中的函数一样 减少污染</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//私有属性，只能在对象构造函数内部使用</span></span><br><span class="line">    <span class="keyword">var</span> className = <span class="string">"用户对象"</span>;</span><br><span class="line">    <span class="comment">//公有属性,在对象实例化后调用</span></span><br><span class="line">    <span class="keyword">this</span>.name = name;</span><br><span class="line">    <span class="comment">//私有方法</span></span><br><span class="line">    <span class="keyword">var</span> privateFunction = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name); <span class="comment">//公有属性</span></span><br><span class="line">        alert(className); <span class="comment">//正确 直接通过变量名访问</span></span><br><span class="line">        alert(<span class="keyword">this</span>.className); <span class="comment">//undefined 错误 不能这样访问</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//公有方法</span></span><br><span class="line">    <span class="keyword">this</span>.publicFunction = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="keyword">this</span>.name); <span class="comment">//公有属性</span></span><br><span class="line">        alert(className); <span class="comment">//正确 直接通过变量名访问</span></span><br><span class="line">        alert(<span class="keyword">this</span>.className); <span class="comment">//undefined 错误 不能这样访问</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="构造函数进阶"><a href="#构造函数进阶" class="headerlink" title="构造函数进阶"></a>构造函数进阶</h3><h4 id="1-只使用构造函数创建对象"><a href="#1-只使用构造函数创建对象" class="headerlink" title="1.只使用构造函数创建对象"></a>1.只使用构造函数创建对象</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">//该函数 用于创建对象 其除了是一个函数之外，我们又称之为构造对象的函数 - 简称构造函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Product</span>(<span class="params">name,description</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">   <span class="keyword">this</span>.name=name;</span><br><span class="line">    <span class="comment">// 属性</span></span><br><span class="line">    <span class="keyword">this</span>.description = description</span><br><span class="line">    <span class="comment">//方法 又称方法属性 万物皆属性</span></span><br><span class="line">    <span class="keyword">this</span>.buy=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">'buy'</span>)</span><br><span class="line">    &#125;</span><br><span class="line"> &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//会拷贝一份</span></span><br><span class="line">  <span class="keyword">var</span> p1 = <span class="keyword">new</span> Product()</span><br><span class="line">  <span class="keyword">var</span> p2 = <span class="keyword">new</span> Product()</span><br><span class="line"></span><br><span class="line">  <span class="built_in">console</span>.log(p1.constructor)</span><br><span class="line">  <span class="built_in">console</span>.log(p2.constructor)</span><br><span class="line"></span><br><span class="line">  <span class="comment">/*如何判断某个实例是否是根据某个构造函数创建的*/</span></span><br><span class="line">  <span class="keyword">if</span>(p1 <span class="keyword">instanceof</span> Product)&#123;</span><br><span class="line">      alert(<span class="string">'true'</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="comment">/*存在的问题*/</span></span><br><span class="line">  <span class="comment">//每个实例的name，描述确实不一样，需要单独的空间存储，但是buy方法是所有实例都一样的</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">/*为了避免内存浪费，所以出现了原型帮助我们解决这个问题*/</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">/*原型对象 不管你实例化多少次，都只生成一次*/</span></span><br></pre></td></tr></table></figure>


<h4 id="2-四种创建方式"><a href="#2-四种创建方式" class="headerlink" title="2.四种创建方式"></a>2.四种创建方式</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*传参形式*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Product</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line">Product.prototype=&#123;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> iphone = <span class="keyword">new</span> Product(<span class="string">'iphone8s'</span>)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*默认值*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Product</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = <span class="string">''</span></span><br><span class="line">    <span class="keyword">this</span>.price=<span class="number">0</span></span><br><span class="line">&#125;</span><br><span class="line">Product.prototype=&#123;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> iphone = <span class="keyword">new</span> Product()</span><br><span class="line"><span class="comment">/*动态添加形式*/</span></span><br><span class="line">iphone.description=<span class="string">'XXXXXXXXXX'</span></span><br><span class="line">iphone.images=[]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*混合模式*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Product</span>(<span class="params">name,price</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = name</span><br><span class="line">    <span class="keyword">this</span>.price=price</span><br><span class="line">    <span class="keyword">this</span>.version=<span class="number">1.0</span></span><br><span class="line">    <span class="keyword">this</span>.add=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line">Product.prototype=&#123;&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> iphone = <span class="keyword">new</span> Product()</span><br><span class="line"><span class="comment">/*动态添加形式*/</span></span><br><span class="line">iphone.description=<span class="string">'XXXXXXXXXX'</span></span><br><span class="line">iphone.images=[]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(iphone <span class="keyword">instanceof</span> Product)<span class="comment">//true</span></span><br></pre></td></tr></table></figure>

<h4 id="5-面试题"><a href="#5-面试题" class="headerlink" title="5. 面试题"></a>5. 面试题</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = <span class="string">'peter'</span>;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        name: <span class="string">'jack'</span></span><br><span class="line">    &#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p1 = <span class="keyword">new</span> fun1();</span><br><span class="line"><span class="built_in">console</span>.log(p1.name) <span class="comment">//peter </span></span><br><span class="line"><span class="built_in">console</span>.log(p1) <span class="comment">//p1是对象&#123;name: 'jack'&#125; </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> <span class="keyword">var</span> fun1 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.name = <span class="string">'peter'</span>;</span><br><span class="line">      <span class="keyword">this</span>.id = <span class="number">10</span>;</span><br><span class="line">      <span class="keyword">this</span>.params=<span class="string">"参数"</span>;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">          name: <span class="string">'jack'</span>,</span><br><span class="line">        	id:<span class="number">10</span></span><br><span class="line">      &#125;;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> p1 = <span class="keyword">new</span> fun1();</span><br><span class="line">  <span class="built_in">console</span>.log(p1.name)</span><br><span class="line">  <span class="built_in">console</span>.log(p1)</span><br><span class="line">  <span class="built_in">console</span>.log(fun1())</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fun2 = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.name = <span class="string">'peter'</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'jack'</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p2 = <span class="keyword">new</span> fun2();</span><br><span class="line"><span class="built_in">console</span>.log(p2.name)</span><br></pre></td></tr></table></figure>

<h3 id="万物皆属性"><a href="#万物皆属性" class="headerlink" title="万物皆属性"></a>万物皆属性</h3><h3 id="理解Object-defineProperty方法"><a href="#理解Object-defineProperty方法" class="headerlink" title="理解Object.defineProperty方法"></a>理解Object.defineProperty方法</h3><p>之前没怎么对Object.defineProperty方法做深入了解，就知道可以通过这个方法可以设置对象的属性，现在稍微了解以后，发现还是有不少东西值得记录一下的，所以写下这篇博客。</p>
<h4 id="一、语法"><a href="#一、语法" class="headerlink" title="一、语法"></a>一、语法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Object</span>.defineProperty(obj, prop, descriptor)</span><br></pre></td></tr></table></figure>
<p>obj：需要定义属性的对象</p>
<p>prop：需要定义的属性</p>
<p>descriptor：属性的描述描述符</p>
<p>返回值：返回此对象</p>
<h5 id="举个例子"><a href="#举个例子" class="headerlink" title="[举个例子]"></a>[举个例子]</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span>  obj = <span class="built_in">Object</span>.create(<span class="literal">null</span>);</span><br><span class="line"><span class="keyword">let</span> descriptor = &#123;</span><br><span class="line">    configurable:<span class="literal">false</span>,</span><br><span class="line">    writable:<span class="literal">false</span>,</span><br><span class="line">    enumerable:<span class="literal">false</span>,</span><br><span class="line">    value:<span class="string">'hello world'</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj,<span class="string">'hello'</span>,descriptor);</span><br><span class="line"> </span><br><span class="line"><span class="built_in">console</span>.log(obj.hello);<span class="comment">//hello world</span></span><br></pre></td></tr></table></figure>
<p>obj和prop参数没什么好说的，主要是这个descriptor(描述符)参数，可以深究的东西比较多，所以接下来细细讲一讲。</p>
<h3 id="二、描述符"><a href="#二、描述符" class="headerlink" title="二、描述符"></a>二、描述符</h3><p>在JS中对象具有两种属性，分别是数据属性和访问器属性，所以其描述符也根据属性分类，分为数据描述符和访问器描述符。</p>
<p>在使用描述符时，必须是两种形式之一，且两者不能同时使用。</p>
<h3 id="2-1-数据描述符"><a href="#2-1-数据描述符" class="headerlink" title="2.1 数据描述符"></a>2.1 数据描述符</h3><pre><code>数据描述符是一个具有值的属性，该值可能是可写的，也可能是不可写的。

它具有以下可选的键值：

configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。

enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。

value：表示该属性的值。可以是任何有效的JS值。默认为undefined。

writable：表示该属性的值是否可写，默认为false。当且仅当属性的writable为true时，其值才能被赋值运算符改变。</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    hello:<span class="string">'world'</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Object</span>.getOwnPropertyDescriptor(obj, <span class="string">'hello'</span>));</span><br></pre></td></tr></table></figure>


<h3 id="2-2-访问器描述符"><a href="#2-2-访问器描述符" class="headerlink" title="2.2 访问器描述符"></a>2.2 访问器描述符</h3><pre><code>访问器描述符是一个有getter-setter函数对描述的属性的读写。

它具有以下可选的键值：

configurable：表示该属性能否通过delete删除，能否修改属性的特性或者能否修改访问器属性，默认为false。当且仅当该属性的configurable为true时，才能实现上述行为。

enumerable：表示该属性是否可以枚举，即可否通过for..in访问属性。默认为false。

get：在读取属性时调用的函数，默认值为undefined。

set：在写入属性时调用的函数，默认值为undefined。</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    _hello:<span class="string">'hello world'</span> <span class="comment">//表示私有变量</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj,<span class="string">'hello'</span>,&#123;</span><br><span class="line">    <span class="keyword">get</span>() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'get'</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>._hello;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">set</span>:function (value) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'set'</span>);</span><br><span class="line">        <span class="keyword">this</span>._hello = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"> </span><br><span class="line"><span class="built_in">console</span>.log(obj.hello);</span><br><span class="line">obj.hello = <span class="string">'goodbye'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(obj.hello);</span><br></pre></td></tr></table></figure>

<p>在这个例子中，_hello和hello属性的值绑定了，即obj.hello = obj._hello，除非重新定义obj.hello属性。所以这个例子不是很优雅，那么下面的例子也是实现了同样的功能，但是看上去更舒服一点。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Hello</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> hello = <span class="string">'hello world'</span>;</span><br><span class="line">    <span class="built_in">Object</span>.defineProperty(<span class="keyword">this</span>, <span class="string">'hello'</span>, &#123;</span><br><span class="line">        <span class="keyword">get</span>()&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'get'</span>);</span><br><span class="line">            <span class="keyword">return</span> hello;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="keyword">set</span>(value)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'set'</span>);</span><br><span class="line">            hello = value;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> obj = <span class="keyword">new</span> Hello();</span><br><span class="line"><span class="built_in">console</span>.log(obj.hello);</span><br><span class="line">obj.hello = <span class="string">'goodbye'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(obj.hello);</span><br></pre></td></tr></table></figure>


<p>从本质上来讲两种方式没区别，之所以这个例子看上去比较优雅，是因为采用了闭包的思想，隐藏了他们访问的都是同一块内存区域的本质。</p>
<h3 id="2-3-注意点"><a href="#2-3-注意点" class="headerlink" title="2.3 注意点"></a>2.3 注意点</h3><pre><code>数据描述符和访问器描述符不能同时使用，否则会报错。</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Hello</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> hello = <span class="string">"hello world"</span>;</span><br><span class="line">    <span class="built_in">Object</span>.defineProperty(<span class="keyword">this</span>, <span class="string">'hello'</span>, &#123;</span><br><span class="line">        <span class="keyword">get</span>()&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'get'</span>);</span><br><span class="line">            <span class="keyword">return</span> hello;</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="keyword">set</span>(value)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'set'</span>);</span><br><span class="line">            hello = value;</span><br><span class="line">        &#125;,</span><br><span class="line">        writable:<span class="literal">true</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> obj = <span class="keyword">new</span> Hello();</span><br></pre></td></tr></table></figure>

<h3 id="三、瞎联想"><a href="#三、瞎联想" class="headerlink" title="三、瞎联想"></a>三、瞎联想</h3><pre><code>主要这个东西让我想到了ES6中提出的Proxy(代理对象)，它同样也起到了属性拦截器的作用，但是功能更强大，这里也举个例子。</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">     hello:<span class="string">'hello world'</span></span><br><span class="line"> &#125;;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> proxy = <span class="keyword">new</span> <span class="built_in">Proxy</span>(obj, &#123;</span><br><span class="line">    <span class="keyword">get</span>(target, property) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'get'</span>);</span><br><span class="line">        <span class="keyword">return</span> target[property];</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">set</span>(target,property,value) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'set'</span>);</span><br><span class="line">        target[property] = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"> </span><br><span class="line"><span class="built_in">console</span>.log(proxy.hello);</span><br><span class="line">proxy.hello = <span class="string">'goodbye'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(proxy.hello);</span><br></pre></td></tr></table></figure>
<p>执行后的输出结果和上面通过设置属性的访问器描述符的结果一样。而且从代码上看，区别也不是很大，所以Proxy相当于访问器描述符的加强版吧，我是这么觉得的。（感觉我在这地方说法可能有问题，希望有大牛指点一下）</p>
<h3 id="四、应用"><a href="#四、应用" class="headerlink" title="四、应用"></a>四、应用</h3><pre><code>鼎鼎有名的Vue.js实现数据双向绑定的原理就是用的Object.defineProperty，这里不细讲，但是推荐一篇文章剖析Vue原理&amp;实现双向绑定MVVM，里面讲的挺细的。

然后这里提供一个极简的数据双向绑定的例子，取自面试官: 实现双向绑定Proxy比defineproperty优劣如何?</code></pre><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = &#123;&#125;;</span><br><span class="line"><span class="built_in">Object</span>.defineProperty(obj, <span class="string">'text'</span>, &#123;</span><br><span class="line">    <span class="keyword">get</span>() &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'get val'</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="keyword">set</span>(newVal) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'set val:'</span> + newVal);</span><br><span class="line">        <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>).value = newVal;</span><br><span class="line">        <span class="built_in">document</span>.getElementById(<span class="string">'span'</span>).innerHTML = newVal;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> input = <span class="built_in">document</span>.getElementById(<span class="string">'input'</span>);</span><br><span class="line">input.addEventListener(<span class="string">'keyup'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    obj.text = e.target.value;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>当输入框改变时，页面显示也会改变。只是示例，并没有啥大用处。</p>
<h3 id="JS-数组克隆方法总结"><a href="#JS-数组克隆方法总结" class="headerlink" title="JS 数组克隆方法总结"></a>JS 数组克隆方法总结</h3><blockquote>
<p>ES5 方法总结</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// 1.slice</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">2</span>,<span class="number">4</span>,<span class="number">434</span>,<span class="number">43</span>]</span><br><span class="line"><span class="keyword">let</span> arr1= arr.slice()</span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">'a'</span></span><br><span class="line"><span class="built_in">console</span>.log(arr,arr1) <span class="comment">// [ 2, 4, 434, 43 ]</span></span><br><span class="line"><span class="built_in">console</span>.log(arr1 === arr) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 遍历数组</span></span><br><span class="line"><span class="built_in">Array</span>.prototype.clone = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">let</span> a=[];</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>,l=<span class="keyword">this</span>.length;i&lt;l;i++) &#123;</span><br><span class="line">        a.push(<span class="keyword">this</span>[i]);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> a;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'aaa'</span>,<span class="string">'bbb'</span>,<span class="string">'ccc'</span>,<span class="string">'wwwww'</span>,<span class="string">'ddd'</span>]</span><br><span class="line"><span class="keyword">let</span> arr2 = arr.clone()</span><br><span class="line"><span class="built_in">console</span>.log(arr2)</span><br><span class="line"><span class="built_in">console</span>.log( arr2 === arr )</span><br><span class="line"></span><br><span class="line"><span class="comment">//3. concat()</span></span><br><span class="line"><span class="built_in">Array</span>.prototype.clone=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">    <span class="keyword">return</span> [].concat(<span class="keyword">this</span>); </span><br><span class="line">    <span class="comment">//或者 return this.concat();</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'aaa'</span>,<span class="string">'asss'</span>]</span><br><span class="line"><span class="keyword">let</span> arr1 = arr.clone()</span><br><span class="line">arr[<span class="number">0</span>] = <span class="number">123</span></span><br><span class="line"><span class="built_in">console</span>.log(arr,arr1)</span><br></pre></td></tr></table></figure>


<blockquote>
<p>ES6 方法总结</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1. Object.assign() 浅复制，也可以实现数组的克隆</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="string">'sdsd'</span>,<span class="number">123</span>,<span class="number">123</span>,<span class="number">123</span>]</span><br><span class="line"><span class="keyword">let</span> arr1 = []</span><br><span class="line"><span class="built_in">Object</span>.assign(arr1,arr)</span><br><span class="line">arr[<span class="number">1</span>] = <span class="string">'aaaa'</span></span><br><span class="line"><span class="built_in">console</span>.log(arr,arr1) <span class="comment">// [ 'sdsd', 'aaaa', 123, 123 ] [ 'sdsd', 123, 123, 123 ]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 扩展运算符</span></span><br><span class="line"><span class="keyword">const</span> a1 = [<span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="comment">// 写法一</span></span><br><span class="line"><span class="keyword">const</span> a2 = [...a1];</span><br><span class="line">a1[<span class="number">0</span>] = <span class="string">'aaa'</span></span><br><span class="line"><span class="built_in">console</span>.log(a1,a2)</span><br></pre></td></tr></table></figure>




      
    </div>
    <div id="comments">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a style="word-wrap:break-word;" href="http://yoursite.com/2020/03/09/01/JavaScript/" title="JavaScript资料" target="_blank" rel="external">http://yoursite.com/2020/03/09/01/JavaScript/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://github.com/chen08" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://github.com/chen08" target="_blank"><span class="text-dark">溟海</span><small class="ml-1x">Web Developer &amp; Designer</small></a></h3>
        <div>天行健，君子以自强不息，地势坤，君子以厚德载物。 杀不死我的,终将使我强大 没有吃不了的苦,只有享不了的福</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
      <div id="vcomments"></div>
    
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/2020/03/09/01/JavaScript%20%E7%AE%97%E6%B3%95%E4%B8%8E%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" title="JavaScript 算法与数据结构"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;Newer</span></a>
    </li>
    
    
    <li class="next">
      <a href="/2019/11/24/01/javascript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" title="JavaScript设计模式-学习"><span>Older&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
    <li class="toggle-toc">
      <a class="toggle-btn collapsed" data-toggle="collapse" href="#collapseToc" aria-expanded="false" title="Catalogue" role="button">
        <span>[&nbsp;</span><span>Catalogue</span>
        <i class="text-collapsed icon icon-anchor"></i>
        <i class="text-in icon icon-close"></i>
        <span>]</span>
      </a>
    </li>
    
  </ul>
  
  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-fancy btn-donate pop-onhover bg-gradient-warning" data-toggle="modal" data-target="#donateModal"><span>$</span></button>
  <!-- <div class="wave-icon wave-icon-danger btn-donate" data-toggle="modal" data-target="#donateModal">
    <div class="wave-circle"><span class="icon"><i class="icon icon-bill"></i></span></div>
  </div> -->
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="weibo,qq,wechat,facebook,twitter" data-mobile-sites="weibo,qq,qzone"></div>
    
  </div>
  </div>
</nav>
  
<!-- Modal -->
<div class="modal modal-center modal-small modal-xs-full fade" id="donateModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content donate">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body">
        <div class="donate-box">
          <div class="donate-head">
            <p>Maybe you could buy me a cup of coffee.</p>
          </div>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade active in" id="alipay">
              <div class="donate-payimg">
                <img src="/images/donate/alipayimg.png" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open alipay app scan this qrcode, buy me a coffee!</p>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="wechatpay">
              <div class="donate-payimg">
                <img src="/images/donate/wechatpayimg.png" alt="Scan Qrcode" title="Scan" />
              </div>
              <p class="text-muted mv">Scan this qrcode</p>
              <p class="text-grey">Open wechat app scan this qrcode, buy me a coffee!</p>
            </div>
          </div>
          <div class="donate-footer">
            <ul class="nav nav-tabs nav-justified" role="tablist">
              <li role="presentation" class="active">
                <a href="#alipay" id="alipay-tab" role="tab" data-toggle="tab" aria-controls="alipay" aria-expanded="true"><i class="icon icon-alipay"></i> alipay</a>
              </li>
              <li role="presentation" class="">
                <a href="#wechatpay" role="tab" id="wechatpay-tab" data-toggle="tab" aria-controls="wechatpay" aria-expanded="false"><i class="icon icon-wepay"></i> wechat payment</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/cofess" target="_blank" title="Github" data-toggle=tooltip data-placement=top><i class="icon icon-github"></i></a></li>
        
        <li><a href="http://weibo.com/cofess" target="_blank" title="Weibo" data-toggle=tooltip data-placement=top><i class="icon icon-weibo"></i></a></li>
        
        <li><a href="https://twitter.com/iwebued" target="_blank" title="Twitter" data-toggle=tooltip data-placement=top><i class="icon icon-twitter"></i></a></li>
        
        <li><a href="https://www.behance.net/cofess" target="_blank" title="Behance" data-toggle=tooltip data-placement=top><i class="icon icon-behance"></i></a></li>
        
        <li><a href="/atom.xml" target="_blank" title="Rss" data-toggle=tooltip data-placement=top><i class="icon icon-rss"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/js/plugin.min.js"></script>


<script src="/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
            UNTITLED: '(Untitled)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/js/insight.js"></script>






   


<!-- custom analytics part create by xiamo -->
<script  src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
<!-- <script defer src="/js/av-min-1.2.1.js"></script> -->
<script >
AV.init({
  appId: 'ngFQzHw7z0HgQfrtn4En4WTN-gzGzoHsz',
  appKey: 'W9hgBBfVDwRGJKoGp5a6HKpx'
});

function showTime(Counter) {
	var query = new AV.Query(Counter);
		var visitors= $('.leancloud_visitors');
		query.greaterThanOrEqualTo("time", 0);		
		query.find({
			success: function(results) {
				if (results.length == 0) {				
					return;
				}
				var data = results;
				visitors.each(function(){
					var url = $(this).attr('id').trim();					
					for (var i = 0; i < data.length; i++) {
						var object = data[i];
						var content = object.get('time');
						var _url = object.get('url')
						if(url == _url){
							$(this).text(content);
						}
					}
				})
				
			},
			error: function(object, error) {
				console.log("Error: " + error.code + " " + error.message);
			}
		});
}

function addCount(Counter) {
	var Counter = AV.Object.extend("Counter");
	url = $(".leancloud_visitors").attr('id').trim();
	title = $(".leancloud_visitors").attr('data-flag-title').trim();
	var query = new AV.Query(Counter);
	query.equalTo("url", url);
	query.find({
		success: function(results) {
			if (results.length > 0) {
				var counter = results[0];
				counter.fetchWhenSave(true);
				counter.increment("time");
				counter.save(null, {
					success: function(counter) {
						var content = counter.get('time');
						$(document.getElementById(url)).text(content);
					},
					error: function(counter, error) {
						console.log('Failed to save Visitor num, with error message: ' + error.message);
					}
				});
			} else {
				var newcounter = new Counter();
				newcounter.set("title", title);
				newcounter.set("url", url);
				newcounter.set("time", 1);
				newcounter.save(null, {
					success: function(newcounter) {
					    console.log("newcounter.get('time')="+newcounter.get('time'));
						var content = newcounter.get('time');
						$(document.getElementById(url)).text(content);
					},
					error: function(newcounter, error) {
						console.log('Failed to create');
					}
				});
			}
		},
		error: function(error) {
			console.log('Error:' + error.code + " " + error.message);
		}
	});
}
$(function() {
	var Counter = AV.Object.extend("Counter");
	if ($('.leancloud_visitors').length == 1) {
		addCount(Counter);
	} else {
		showTime(Counter);
	}
}); 
</script>



   
    
  <!-- <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script> -->
  <script src="//cdn.jsdelivr.net/npm/valine"></script>
  <script type="text/javascript">
  var GUEST = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link';
  meta = meta.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
  });
  new Valine({
    el: '#vcomments',
    verify: false,
    notify: false,
    appId: '',
    appKey: '',
    placeholder: 'Just go go',
    avatar: 'mm',
    meta: meta,
    pageSize: '10' || 10,
    visitor: false
  });
  </script>

     







</body>
</html>